/**
 * 主题色
 */

// ===== 全局变量 =====

:root {
  --header-height: 55px;
  --footer-height: 30px;
  --tabs-height: 40px;
  --el-menu-horizontal-sub-item-height: 50px;
  --page-padding: 15px;
  --page-gap: 15px;
}

// ===== 预设主题色，不建议修改 =====

.light {
  --el-aside-logo-text-color: #303133;
  --el-aside-border-color: #e4e7ed;
  --el-header-logo-text-color: #303133;
  --el-header-bg-color: #ffffff;
  --el-header-text-color: #303133;
  --el-header-text-color-regular: #606266;
  --el-header-border-color: #e4e7ed;
  --el-menu-bg-color: #ffffff;
  --el-menu-hover-bg-color: #cccccc;
  --el-menu-active-bg-color: var(--el-color-primary-light-9);
  --el-menu-text-color: #333333;
  --el-menu-active-color: var(--el-color-primary);
  --el-menu-hover-text-color: #333333;

  &.is-header-inverted {
    --el-header-logo-text-color: #dadada;
    --el-header-bg-color: #141414;
    --el-header-text-color: #e5eaf3;
    --el-header-text-color-regular: #cfd3dc;
    --el-header-border-color: #414243;
  }

  &.is-aside-inverted {
    --el-aside-logo-text-color: #dadada;
    --el-aside-border-color: #414243;
    --el-menu-bg-color: #141414;
    --el-menu-hover-bg-color: #000000;
    --el-menu-active-bg-color: #000000;
    --el-menu-text-color: #bdbdc0;
    --el-menu-active-color: #ffffff;
    --el-menu-hover-text-color: #ffffff;
  }
}

.dark {
  --el-aside-logo-text-color: #dadada;
  --el-aside-border-color: #414243;
  --el-header-logo-text-color: #dadada;
  --el-header-bg-color: #141414;
  --el-header-text-color: #e5eaf3;
  --el-header-text-color-regular: #cfd3dc;
  --el-header-border-color: #414243;
  --el-menu-bg-color: #141414;
  --el-menu-hover-bg-color: #000000;
  --el-menu-active-bg-color: #000000;
  --el-menu-text-color: #bdbdc0;
  --el-menu-active-color: #ffffff;
  --el-menu-hover-text-color: #ffffff;

  &.is-header-inverted {
    --el-header-logo-text-color: #303133;
    --el-header-bg-color: #ffffff;
    --el-header-text-color: #303133;
    --el-header-text-color-regular: #606266;
    --el-header-border-color: #e4e7ed;
  }

  &.is-aside-inverted {
    --el-aside-logo-text-color: #303133;
    --el-aside-border-color: #e4e7ed;
    --el-menu-bg-color: #ffffff;
    --el-menu-hover-bg-color: #cccccc;
    --el-menu-active-bg-color: var(--el-color-primary-dark-9);
    --el-menu-text-color: #333333;
    --el-menu-active-color: var(--el-color-primary);
    --el-menu-hover-text-color: #333333;
  }
}

// ===== 自定义主题色 =====

.light {
  // 中性色
  --neutral-color-0: #000000;
  --neutral-color-1: #262626;
  --neutral-color-2: #595959;
  --neutral-color-3: #8c8c8c;
  --neutral-color-4: #bfbfbf;
  --neutral-color-5: #d9d9d9;
  --neutral-color-6: #e8e8e8;
  --neutral-color-7: #f5f5f5;
  --neutral-color-8: #fafafa;
  --neutral-color-9: #ffffff;

  --card-bg-color: #ffffff;
  --card-border-color: #ffffff22;
  --card-shadow-color: #8e8e8e22;
  --glass-bg-color: #ffffff44;
}

.dark {
  // 中性色
  --neutral-color-0: #ffffff;
  --neutral-color-1: #dfdfdf;
  --neutral-color-2: #b3b3b3;
  --neutral-color-3: #888888;
  --neutral-color-4: #5c5c5c;
  --neutral-color-5: #464646;
  --neutral-color-6: #3a3a3a;
  --neutral-color-7: #2f2f2f;
  --neutral-color-8: #2a2a2a;
  --neutral-color-9: #262626;

  --card-bg-color: #141414;
  --card-border-color: #ffffff22;
  --card-shadow-color: #0e0e0e22;
  --glass-bg-color: #59595922;
}
